<template>
  <view class="container">
    <view
      class="bg"
     
    >
      <image src="~@/static/images/user/login/BG.png" class="headbg"></image>
      <view class="tip">
        <view class="logo">
          <text class="goods-manage-icon icon">&#xe607;</text>
        </view>
        <view class="title">应急物资管理</view>
      </view>
    </view>
    <view class="loginfrom">
      <form @submit="formSubmit">
        <view class="loginfrom">
          <view class="item0 flex">
            <text class="goods-manage-icon icon">&#xe606;</text>
            <view class="input item">
              <input class="uni-input item" v-model="username" placeholder="请输入账号" />
            </view>
          </view>
          <view class="item0 flex">
            <text class="goods-manage-icon icon">&#xe603;</text>
            <view class="input item">
              <view class="flex">
                <input
                  class="uni-input"
                  v-model="password"
                  placeholder="请输入密码"
                  :password="showPassword"
                />
                <text
                  class="uni-icon"
                  :class="[!showPassword ? 'uni-eye-active' : '']"
                  @click="changePassword"
                >&#xe568;</text>
              </view>
            </view>
          </view>
          <view>
            <view class="desc">忘记密码！</view>
          </view>
          <view class="item0 flex btn">
            <view v-if="!isLogin" class="sub" @click="submit">登录</view>
            <view v-else class="sub" >登录中...</view>
            <!-- <button class="item" type="primary">登录</button> -->
          </view>
        </view>
      </form>
    </view>
  </view>
</template>

<script>
import indexBackgroundImage from "@/static/images/user/login/BG.png";
import { applogin } from "../interface.js";
import {user,tools} from '@/common/framework';

export default {
  data() {
    return {
      showPassword: true,
      indexBackgroundImage: indexBackgroundImage,
      username: "admin",
      password: "123456",
      isLogin:false
    };
  },
  methods: {
    formSubmit(e) {
      console.log(e);
    },
    changePassword: function() {
      this.showPassword = !this.showPassword;
    },
    submit(e) {
      if (this.username && this.password) {
        this.doLogin();
      } else {
        uni.showToast({
          icon: "none",
          title: "账号密码不能为空！"
        });
        return;
      }
    },
    async doLogin() {
      this.isLogin = true;
      let Res = await applogin({
        username: this.username,
        password: this.password
      });
     this.isLogin = false;
      if(Res && Res.success){
          let info = {
            userId: Res.result.userInfo.id||'',
            jobNo: Res.result.userInfo.id||'',
            orgId: Res.result.departs[0]&&Res.result.departs[0].id||'',
            orgName: Res.result.departs[0]&&Res.result.departs[0].departName||'',
            userEmail:Res.result.userInfo.email||'',
            userName: Res.result.userInfo.username||'',
            userRealName: Res.result.userInfo.realname||'',
            userMobile: Res.result.userInfo.phone||'',
            headerImg: Res.result.userInfo.avatar||'',
            token: Res.result.token||'',
            clientId:"",
            connectId:"",
            backup:Res.result.userInfo
        };
        user.setUserInfo(info);
        uni.reLaunch({
            url: '/pages/work/index/index'
        })
        
      }else{
       tools.toast('登录失败');
      }
      
    }
  }
};

</script>

<style lang="scss">


.container {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  color: #999;
  // padding: 100px 0;
  text-align: center;
  background: #fff;
}
.bg {
  width: 750upx;
  height: 500upx;
  
  .headbg{
    width: 750upx;
  }

  .tip {
    position: absolute;
    top: 3%;
    left: 0;
    width: 100%;
    text-align: center;
    color: #fff;
    .logo .icon {
      font-size: 120upx;
    }
    .title {
      font-size: 70upx;
    }
  }
}
.loginfrom {
  width: 70vw;
  margin: 0 auto;
  text-align: left;
  .input {
    border-bottom: 0.5px solid #999;
    padding-bottom: 1upx;
    text-align: left;
  }
  .uni-input {
    display: inline-block;
    line-height: 45upx;
    padding: 5px 12px;
    color: #999;
  }
  .item0 {
    padding-top: 30upx;
    color: #999;
  }
  .icon {
    // margin-right: 20upx;
    font-size: 40upx;
    color: #4e62ff;
  }
  .uni-icon {
    position: relative;
    top: 10upx;
  }
  .uni-eye-active {
    color: #4e62ff;
  }
  .desc {
    padding-left: 40upx;
    cursor: pointer;
    line-height: 70upx;
  }
  .btn {
    padding-left: 100upx;
    padding-right: 100upx;
    uni-button {
      border-radius: 50upx;
      background-color: #4e62ff;
    }
  }
  .sub {
    width: 100%;
    height: 90upx;
    background: #4e62ff;
    color: #fff;
    text-align: center;
    border-radius: 40upx;
    line-height: 90upx;
    font-size: 40upx;
  }
}
.flex {
  display: flex;
  .item {
    flex: 1;
  }
}
</style>